<template>
  <div>
    <div class="chat-box warpper" :class="fullScreen ? 'chat-box-full' : ''" ref="containerRef">
      <div class="content-wrap">
        <chatContent ref="childRef"
                     v-model:chatHistory="chatHistory"
                     :showChatLoading="showChatLoading"
                     :submitFlag="submitFlag"
                     :showChatTip="showChatTip"
                     :fullScreen="fullScreen"
                     @resetScroll="resetScroll"
                     @tipClick="tipClick"
        />
      </div>
      <div>
        <div class="top">
          <img src="../../assets/image/aichat/top.png" @click="triggerTop()"/>
        </div>
      </div>
    </div>
    <div class="wrap-bottom">
      <div class="bottom-wrap active">
        <div
            :class="[agentType !== 'default' ? 'lead-bottom-wrap' : 'no-lead-wrap',  { 'focused-border': isFocused && agentType !== 'default' }]">
          <div class="lead-info" v-if="agentType != 'default'">
            <div class="lead-title"><span>{{ leadTxt }}</span></div>
            <div class="lead-icon" @click="closeLeadInfo()">
              <el-icon :size="20">
                <CircleCloseFilled/>
              </el-icon>
            </div>
          </div>
          <div class="right-input" :class="[{ 'focused-border': isFocused && agentType == 'default' }]">
            <form action="" method="get">
              <el-input ref="inputRef"
                        v-model="inputTxt"
                        class="input-text"
                        :placeholder="inputPlaceholder"
                        @keyup.enter.native.prevent="submitInput()"
                        @keydown.enter.prevent="handleEnter"
                        :autosize="{ minRows: 1, maxRows: 4 }"
                        type="textarea"
                        @focus="handleFocus"
                        @blur="handleBlur"
              >
              </el-input>
              <template v-if="interruptBtnFlag">
                <div class="send-button interrupt-button" @click="interruptStreamContent()" title="停止回答">
                  <img src="../../assets/image/common/interrupt.png"/>
                </div>
              </template>
              <template v-else>
                <div class="send-button submiting-button" v-if="submiting">
                </div>
                <el-tooltip popper-class="content-tooltip" :content="inputTxtDisabledTip" :visible="inputTxtDisabled"
                            placement="top-start" effect="customized" v-else>
                  <el-button class="send-button" type="" text @click="submitInput()" :disabled="inputTxtDisabled">
                    <span class="aifont icon-fasong"></span>
                  </el-button>
                </el-tooltip>
              </template>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, ref, watch} from 'vue'
import {ElMessage, ElTooltip} from 'element-plus';
import chatContent from "./chatContent.vue";
import {dateFormat} from "@/base/utils";
import {fetchEventSource} from '@microsoft/fetch-event-source';
import {aesEncryptAllParams} from '../../base/AesEncrptUtil.js'
import RandomUtils from '../../base/RandomUtils.js'
import SignatureGenerate from '../../base/signatureGenerate.js'
import moment from "moment";
import Storage from "@/base/storage.js";


const {proxy} = getCurrentInstance()
const apiBaseUrl = import.meta.env.VITE_APP_ZUUL_PATH; // 获取 代理地址 对应的值

const isFocused = ref(false)

const inputTxt = ref('')
let inputTxtUp = ref('')
const leadTxt = ref('')
const inputPlaceholder = ref('请输入想检索的制度内容')
const agentType = ref('default')
const showChatLoading = ref(false)
const showChatTip = ref('正在思考中...')
const submitFlag = ref(false)
const submiting = ref(false)
let intervalId = null; // 用于存储setInterval的ID
const childRef = ref('')
const inputRef = ref(null);
const inputTxtDisabled = ref(false)
const inputTxtDisabledTip = ref('')

const interruptBtnFlag = ref(false)
const interruptStreamFlag = ref(false)
const interruptNoEmptyFlag = ref(false) // 是否中止流式回答
const containerRef = ref(null);

// 历史记录
const chatHistory = ref([])

let ctrl = null
watch(() => inputTxt.value, () => {
  if (inputTxt.value && inputTxt.value.length > 500) {
    inputTxtDisabled.value = true
    inputTxtDisabledTip.value = '超出输入上线，请删除部分内容后发送'
  } else {
    inputTxtDisabled.value = false
    inputTxtDisabledTip.value = ''
  }
}, {immediate: true})
// 提交按钮
const submitInput = async () => {
  // 正在回答中
  if (submiting.value) {
    ElMessage({
      message: "请耐心等待助手完成回复后，才能继续提问哦",
      type: 'warning',
      plain: true,
    })
    return
  }
  // 输入的内容不可用
  if (inputTxtDisabled.value) {
    ElMessage({
      message: inputTxtDisabledTip.value,
      type: 'warning',
      plain: true,
    })
    return
  }
  if (inputTxt.value.trim()) {
    let key = inputTxt.value
    inputTxtUp.value = inputTxt.value
    inputTxt.value = ''
    submiting.value = true
    submitFlag.value = true
    // 用户输入的内容

    chatHistory.value.push({
      id: new Date().getTime(),
      content: key,
      startTime: dateFormat(new Date(), 'MM-dd hh:mm'),
      msgType: '3'
    })
    showChatLoading.value = true
    showChatTip.value = '正在思考中...'
    resetScroll()
    setTimeout(() => {
      sendStreamContent(key)
    }, 500)
  } else {
    ElMessage({
      message: "发送内容不能为空",
      type: 'warning',
      plain: true,
    })
  }
}
const handleEnter = (event) => {
  event.preventDefault();
}


const handleFocus = () => {
  isFocused.value = true;
}
const handleBlur = () => {
  isFocused.value = false;
}


//流式对话 ai 回答出来的内容
const sendStreamContent = (word) => {
  let params = {
    content: word,
    agentType: agentType.value
  }
  ctrl = new AbortController();
  let secretKey = RandomUtils.generateRandomPassword()
  let afterParam = aesEncryptAllParams(params, secretKey);
  const {signature, timestamp} = SignatureGenerate.generateMD5(afterParam)
  interruptBtnFlag.value = true
  fetchEventSource(`${apiBaseUrl}/sse/7257a2db4dc54b269cfc92b72e7156c4`, {
    method: "post",
    mode: 'cors', // 使用 CORS 模式
    // 请求头参数
    // headers: {
    //   'Content-Type': 'application/json;charset=utf-8',
    //   tokenid: Storage.session.get('tokenid'),
    //   appid: GobalEncrptUtil.encryptByPubKeyRSA(Storage.session.get('appid')),
    //   pname: GobalEncrptUtil.encryptByPubKeyRSA(Storage.session.get('pname')),
    //   keyber: GobalEncrptUtil.encryptByPubKeyRSA(secretKey),
    //   signature: signature,
    //   timestamp: timestamp,
    // },
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      "AuthToken": "72201b76431142f99804e21d00a2bde2"
    },
    // 具体传参
    body: JSON.stringify({
      "keyword": word,
      "requestId": new Date() + '000',
      // yyyymmddhhmmssSSS000111
      "dialogld": moment().format('YYYYMMDDHHmmssSSS') + "000111"
    }),
    openWhenHidden: true, // 在调用失败时禁止重复调用
    signal: ctrl.signal,
    onopen: async (response) => {
      // 清空打字内容
      childRef.value.printedText = '';
      if (response.ok) {
        if (interruptStreamFlag.value) {
          ctrl.abort()
          interruptStreamFlag.value = false
          interruptNoEmptyFlag.value = false
          return
        }
        chatHistory.value.push({
          'id': '123321',
          'startTime': dateFormat(new Date(), 'MM-dd hh:mm'),
          'msgType': '100',
        })
        showChatLoading.value = false
      } else {
        let content = '哎呀，出了点小问题，我们的服务暂时无法响应，请稍后再试。'
        let item = {
          'id': new Date().getTime(),
          'startTime': dateFormat(new Date(), 'MM-dd hh:mm'),
          'msgType': '4',
          'content': content
        }
        childRef.value.printStreamText(content, 'end');
        chatHistory.value.push(item)
        showChatLoading.value = false
        interruptStreamFlag.value = false
        interruptNoEmptyFlag.value = false
        if (intervalId) {
          clearInterval(intervalId); // 清除定时器
          intervalId = null; // 重置intervalId
        }
      }
    },
    async onmessage(msg) {
      if (interruptStreamFlag.value) {
        ctrl.abort()
        interruptStreamFlag.value = false
        interruptNoEmptyFlag.value = false
        return
      }
      if (msg && msg.data) {
        // if (msg.data === '$') {
        //   showChatLoading.value = false
        //   interruptBtnFlag.value = false
        //   interruptStreamFlag.value = false
        //   interruptNoEmptyFlag.value = false
        //   submiting.value = false
        //   ctrl.abort();
        //   // 结束打字
        //   await childRef.value.printStreamText('', 'end');
        //   return;
        // }
        try {
          // 开始打字
          await childRef.value.printStreamText(msg.data, 'begin')
        } catch (e) {
          // 结束打字
          await childRef.value.printStreamText(msg.data, 'end');
        }
        submitFlag.value = true
      }

    },
    async onclose() {
      ctrl.abort();

      showChatLoading.value = false
      interruptBtnFlag.value = false
      interruptStreamFlag.value = false
      interruptNoEmptyFlag.value = false
      submiting.value = false

      ctrl.abort();
      // 结束打字
      await childRef.value.printStreamText('', 'end');

      if (intervalId) {
        clearInterval(intervalId); // 清除定时器
        intervalId = null; // 重置intervalId
      }
    },
    async onerror(err) {
      ElMessage({
        message: '当前网络响应有些缓慢，请稍等片刻后再次尝试。',
        type: 'error',
        plain: true,
      })
      showChatLoading.value = false
      interruptBtnFlag.value = false
      interruptStreamFlag.value = false
      interruptNoEmptyFlag.value = false
      submiting.value = false
      if (intervalId) {
        clearInterval(intervalId); // 清除定时器
        intervalId = null; // 重置intervalId
      }
      // 此方法会报错，但可以解决ts语法打包报错问题
      // ctrl.signal.aborted = false
      try {
        if (ctrl) {
          ctrl.abort();
        }
      } finally {
        console.log("finally", ctrl);
      }
    }
  })
}

//中断流式回答
const interruptStreamContent = async () => {
  if (ctrl) {
    ctrl.abort();
    let content = '已停止回答。'
    chatHistory.value[chatHistory.value.length - 1] = {
      'id': new Date().getTime(),
      'startTime': dateFormat(new Date(), 'MM-dd hh:mm'),
      'msgType': '2',
      'content': content
    }
    // 打字
    await childRef.value.printStreamText(content, 'end', true);
    inputTxt.value = inputTxtUp.value
    interruptBtnFlag.value = false
    showChatLoading.value = false
    submiting.value = false
    console.info(chatHistory.value)
  }
}


const closeLeadInfo = async () => {
  inputTxt.value = ''
  leadTxt.value = ''
  agentType.value = 'default'
  inputPlaceholder.value = '有问题请问我'
}


const resetSubmit = () => {
  submiting.value = false;
  resetScroll()
}

const resetScroll = () => {
  // 延迟一下，滚动底部，不然加载太慢了滚不到底部
  setTimeout(() => {
    let chatBox = document.querySelector('.content-wrap')
    chatBox.scrollTo(0, chatBox.scrollHeight + 1000);
    // chatBox.scrollTo(0, chatBox.scrollHeight + 0);
  }, 5)
}
const tipClick = (index) => {
  switch (index) {
    case 0:
      inputTxt.value = '搜索常州的号卡管理制度'
      break;
    case 1:
      inputTxt.value = '帮我比较常州和盐城商机管理制度'
      break
    case 2:
      inputTxt.value = '搜索省公司和盐城的商机更新制度'
      break
  }
  submitInput()
}

// 回到顶部
const triggerTop = () => {
  setTimeout(() => {
    let chatBox = document.querySelector('.content-wrap')
    chatBox.scrollTo({
      top: 0,
      behavior: 'smooth' // 'smooth' 表示平滑滚动
    });
  }, 200)
}


// 组件卸载时清除定时器
onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
  // 从本地存储加载聊天历史
  Storage.remove('chatHistoryWeb')
});

const fullScreen = ref(false)


onMounted(async () => {
  //提示语
  // getHelloInfo()
  // 获取聊天历史记录
  // 测试数据
  let tempData = [{
    "id": 1744093118463,
    "content": "搜索常州的号卡管理制度",
    "startTime": "04-08 14:18",
    "msgType": "3",
    "timeStamp": 1744093118463
  }, {
    "id": 1744093153646,
    "startTime": "04-08 14:19",
    "msgType": "100",
    "show": true,
    "content": "### 总结<br />- **来源地市**：常州<br />- **发布时间**：2024年<br />- **涉及条数**：3<br />- **对比情况**：所有记录均来自同一文件，即《中国移动常州分公司社会实体渠道管理办法（2024年版）》，内容主要集中在号卡的销售渠道管理、号码资源动态管理、以及号卡管理的具体规范上，强调了公平、公正、公开的原则，并对社会渠道的卡号资源需求量进行了详细规定。<br /><br />### 搜索结果原文展示<br />1. **来源**：常州知识库<br />  - **科室**：市场经营部<br />  - **文件**：中国移动常州分公司社会实体渠道管理办法（2024年版）.docx<br />  - **内容**：对所有卡号销售渠道实施基于号码资源共享池的号码资源动态管理，明确号码资源配置规则。其中，对社会渠道应根据网点级别、库存销售能力等确定卡号资源的需求量，并根据销售情况进行动态调整，完善本地号码管理制度和审批流程。各级卡号管理人员不得擅自截留、倒卖或者实施显失公平的号码分配，所有号码分配须在公平、公正、公开的基础上进行。<br /><br />2. **来源**：常州知识库<br />  - **科室**：市场经营部<br />  - **文件**：中国移动常州分公司社会实体渠道管理办法（2024年版）.docx<br />  - **内容**：4. 其余支持针对合作情况较好、业务有进一步提升空间的渠道，定期或不定期开展培训，提供销售工具，提升渠道效能。三、日常经营管理 1. 业务规范管理 1) 号卡管理遵循公平、公正原则。<br /><br />3. **来源**：常州知识库<br />  - **科室**：市场经营部<br />  - **文件**：中国移动常州分公司社会实体渠道管理办法（2024年版）.docx<br />  - **内容**：可按当地的客户喜好将客户号码进行分档分类，匹配营销方案，统一归口管理，原则上不进行单独审批。渠道严禁在店内私自向客户加价或高价贩卖卡号。2) 用户新增遵循实名制要求。",
    "timeStamp": 1744093153647,
    "details": {
      "result1": {"citys": ["常州"], "times": "2024年", "files": "1"},
      "result2": {"between": "所有记录均来自同一文件，即《中国移动常州分公司社会实体渠道管理办法（2024年版）》，内容主要集中在号卡的销售渠道管理、号码资源动态管理、以及号卡管理的具体规范上，强调了公平、公正、公开的原则，并对社会渠道的卡号资源需求量进行了详细规定。"},
      "result3": {
        "original": [{
          "filename": "《中国移动常州分公司社会实体渠道管理办法（2024年版）.docx》",
          "chapter": "号码资源动态管理",
          "content": "对所有卡号销售渠道实施基于号码资源共享池的号码资源动态管理，明确号码资源配置规则。其中，对社会渠道应根据网点级别、库存销售能力等确定卡号资源的需求量，并根据销售情况进行动态调整，完善本地号码管理制度和审批流程。各级卡号管理人员不得擅自截留、倒卖或者实施显失公平的号码分配，所有号码分配须在公平、公正、公开的基础上进行。",
          "city": "常州",
          "department": "市场经营部",
          "time": "2024年"
        }, {
          "filename": "《中国移动常州分公司社会实体渠道管理办法（2024年版）.docx》",
          "chapter": "培训及支持",
          "content": "针对合作情况较好、业务有进一步提升空间的渠道，定期或不定期开展培训，提供销售工具，提升渠道效能。业务规范管理中号卡管理遵循公平、公正原则。",
          "city": "常州",
          "department": "市场经营部",
          "time": "2024年"
        }, {
          "filename": "《中国移动常州分公司社会实体渠道管理办法（2024年版）.docx》",
          "chapter": "用户新增及实名制",
          "content": "可按当地的客户喜好将客户号码进行分档分类，匹配营销方案，统一归口管理，原则上不进行单独审批。渠道严禁在店内私自向客户加价或高价贩卖卡号。用户新增遵循实名制要求。",
          "city": "常州",
          "department": "市场经营部",
          "time": "2024年"
        }]
      }
    }
  }]
  // 从本地存储加载聊天历史
  chatHistory.value = Storage.get('chatHistoryWeb') || []
  // chatHistory.value = tempData
  console.log(' chatHistory.value ', chatHistory.value)

  // 延迟一下，滚动底部，不然加载太慢了滚不到底部
  resetScroll()

})
</script>

<style scoped lang="less">
.chat-box {
  box-sizing: border-box;
  position: relative;
  width: 100vw;
  height: calc(100vh - 85px);
  max-height: calc(100vh - 85px);
  overflow: hidden;
}

.chat-box-full {
  height: calc(100vh - 105px);
  max-height: calc(100vh - 105px);
}

.content-wrap {
  position: absolute;
  top: 0;
  bottom: 10px;
  left: 0;
  width: 100vw;
  box-sizing: border-box;
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px
}

.top {
  position: absolute;
  right: 16px;
  bottom: 90px;
  z-index: 5;
  cursor: pointer;

  img {
    width: 60px;
    height: 60px;
  }
}


.wrap-bottom {
  padding-left: 16px;
  padding-right: 16px;
  width: calc(100vw - 35px);
  z-index: 2;
}


.bottom-wrap {
  width: 100%;
  box-sizing: border-box;
  backdrop-filter: blur(5px);
  opacity: 1;
  display: flex;
  z-index: 0;
  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
  -webkit-user-select: none; /*webkit浏览器*/
  -khtml-user-select: none; /*早期浏览器*/
  -moz-user-select: none; /*火狐*/
  -ms-user-select: none; /*IE10*/
  user-select: none;
  touch-callout: none;

  .left-img {
    height: 50px;

    img {
      height: 100%;
    }
  }

  .right-speak {
    margin-left: 15px;
    flex: 1;
    height: 50px;
    background: linear-gradient(75deg, #5F74EE 0%, #595FF5 23%, #875EEB 58%, #8571F3 100%);
    border-radius: 320px 320px 320px 320px;
    opacity: 1;
    display: flex;

    .content {
      width: 100%;
      display: flex;
    }

    .fixed-speak {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 62px;
      background: linear-gradient(75deg, #2B79E6 0%, #4FA5F7 23%, #349DF5 58%, #3F77E1 100%);
      z-index: 6666;

      .line {
        position: absolute;
        top: -7px;
        background: #fff;
        width: 100%;
        height: 7px;
        left: 0;

        .color-line {
          height: 7px;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          background: linear-gradient(175deg, #FBFFFD 0%, #2EF99D 100%);

        }
      }

      .warning-info {
        display: block;
        position: absolute;
        top: -26px;
        font-size: 12px;
        color: #5F5F5F;
        left: 50%;
        transform: translateX(-50%);
      }

      .warning-info:before {
        content: '放开即刻发送';
        font-size: 12px;
        color: #5F5F5F;
      }

      .left-img2 {
        width: 60px;
        position: absolute;
        left: 25px;

        .iconfont {
          color: #fff;
          font-size: 26px;
          line-height: 62px;
        }

        .active {
          color: red !important;
        }

        img {
          width: 26px;
          height: auto;

        }
      }

      .center-img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        img {
          height: 20px;
        }
      }
    }

    .left-img {
      width: 60px;
      position: relative;

      img {
        width: 32px;
        height: auto;
        margin-top: 9px;
        margin-left: 8px;

      }
    }

    .left-img:after {
      content: '';
      position: absolute;
      width: 1px;
      height: 30px;
      background: rgba(255, 255, 255, 0.3);
      right: 0;
      top: 10px;
    }

    .right-text {
      position: relative;
      flex: 1;
      line-height: 50px;
      text-align: center;
      font-size: 14px;
      color: #fff;

      .hide-box {
        width: 100%;
        height: 50px;
        opacity: 0;
        z-index: 666;
        position: absolute;
        left: 0;
        top: 0;
      }
    }

  }
}

.bottom-wrap.active {
  width: 100%;
  /*width: calc(100vw - 10px);*/
  box-sizing: border-box;
  opacity: 1;
  z-index: 2;
  display: flex;
  align-items: end;
  margin: 2px 0 8px;

  .left-img {
    height: 44px;
    margin-top: 2px;
  }

  ::v-deep .send-button {
    /*background-color: #0022CC;*/

    .icon-fasong {
      font-size: 32px;
    }

    .el-icon:hover {
      color: #0022cc;
    }

    position: absolute;
    right: 10px;
    top: 16%;
    border: none;
    background-color: transparent;
    background: linear-gradient(180deg, #595FF5 5%, #768EDF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0px;

    img {
      width: 32px;
      height: 32px;
    }
  }

  .submiting-button {
    right: 8px;
  }

  .interrupt-button {
    cursor: pointer;
    top: 10px;

    img {
      width: 28px;
      height: 28px;
    }
  }

  .send-button:hover {
    background: linear-gradient(270deg, #5F74EE 0%, #595FF5 23%, #875EEB 57%, #8571F3 100%);
    background-size: 400% 400%;
    animation: gradientAnimation 2s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @keyframes gradientAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  .right-input {
    flex: 1;
    position: relative;
    padding: 5px 20px 5px 10px;
    background: #FFFFFF;
    box-shadow: 0px 8px 3px 0px rgba(153, 153, 153, 0.08);
    border-radius: 12px 12px 12px 12px;
    border: 1px solid #FFFFFF;
    /*margin-right: 5px;*/

    ::v-deep .el-input {
      width: 100%;
      font-size: 14px;
      box-sizing: border-box;

      .el-input__wrapper {
        border-radius: 8px;
      }
    }

    ::v-deep .el-textarea__inner {
      font-size: 14px;
      border-radius: 6px;
      resize: none;
      min-height: 36px !important;
      padding: 7px 11px;
      padding-right: 25px;
      border: none !important;
      padding-left: 0px;
      box-shadow: none;
    }

    ::v-deep .el-textarea__inner:focus {
      caret-color: #768EDF;
      border-color: #0079FD !important; /* 替换为你想要的颜色 */
    }

    .send {
      position: absolute;
      right: 8px;
      top: 4px;
    }
  }

  .focused-border {
    border: 1px solid #0079FD;
    /* 其他聚焦时的样式 */
  }
}

.lead-bottom-wrap {
  padding: 10px 10px 8px 10px;
  width: 100%;
  border-radius: 8px;
  z-index: 2;
  opacity: 1;
  background: #fff;
  border: 1px solid #FFFFFF;

  .lead-info {
    font-size: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #D8D8D8;
    display: flex;
    align-items: center;

    .lead-icon {
      margin-left: auto;
      color: #6F6F6F;
      cursor: pointer;
    }

    .lead-icon:hover {
      color: #0022cc;
    }

    .lead-title {
      background: #ECF2FF;
      border-radius: 10px 10px 10px 10px;
      padding: 8px;
      display: flex;
      font-size: 12px;
      color: #3F61A4;
      font-weight: bold;

      img {
        margin-right: 5px;
      }
    }
  }

  .right-input {
    box-shadow: none !important;
  }

  ::v-deep .send-button {
    right: 1px !important;
  }
}


.no-lead-wrap {
  width: 100%;
}

#waveform {
  width: 130px;
  height: 45px;
}

/* 美化整个滚动条 */
::-webkit-scrollbar {
  width: 8px; /* 设置滚动条的宽度 */
  background-color: #f9f9f9; /* 滚动条的背景色 */
}

/* 美化滚动条轨道 */
::-webkit-scrollbar-track {
  background: #F3F6FC; /* 轨道的背景色 */
}

/* 美化滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; /* 滑块的背景色 */
  border-radius: 10px; /* 滑块的圆角 */
  border: 2px solid #ffffff; /* 滑块边框 */
}

/* 当滑块悬停或活动时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; /* 悬停或活动状态下的背景色 */
}

</style>
